<template>
    <Header />
    <div class="exhibition-container2 hidden-sm-and-up">
        <div class="swiper-container">
            <div class="block">
                <el-carousel height="400px" interval="5000">
                    <el-carousel-item v-for="(item, index) in swiperList" :key="index">
                        <img class="swiper-image"
                            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="">
                        <!-- {{ item.src }} -->
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <div class="ex-info-container">
            <div class="ex-title">
                2024 年广州会展业创新发展峰会
            </div>
            <div class="ex-info">
                <div class="left-info">
                    <div class="info-item">
                        <el-icon style="margin-right:10px">
                            <Clock />
                        </el-icon>
                        2024 / 01 / 13 10:00
                    </div>
                    <div class="info-item">
                        <el-icon style="margin-right:10px">
                            <Location />
                        </el-icon>
                        广东省琶洲市九星大地会展中心
                    </div>
                    <div class="info-item">
                        <el-icon style="margin-right:10px">
                            <OfficeBuilding />
                        </el-icon>
                        展馆：深圳国际会展中心
                    </div>
                </div>
                <div class="daohang">
                    <img src="../static/dh.jpg" alt="">
                    <text>导 航</text>
                </div>
            </div>
        </div>
        <div class="map-contaienr">
            <div class="left-map">
                <div id="container" class="imgStyle" style="height: 300px;">
                    <Map />
                </div>
                <!-- <img class="imgStyle" src="../static/map.jpg" alt=""> -->
            </div>
            <div class="right-info">
                <div class="top-icon">
                    <router-link to="/exhibitionIntro" style="color: #3d3d3d;">
                        <div class="icon-item">
                            <div class="btn-bg">
                                <img class="icon-img" src="../static/miniIMG/exhibition-icon.png" alt="">
                            </div>
                            <div class="icon-title">
                                展商介绍
                            </div>
                        </div>
                    </router-link>
                    <div class="icon-item">
                        <div class="btn-bg">
                            <img class="icon-img" src="../static/miniIMG/order.png" alt="">
                        </div>
                        <div class="icon-title">
                            订房须知
                        </div>
                    </div>
                    <div class="icon-item" @click="goToHotel">
                        <div class="btn-bg">
                            <img class="icon-img" src="../static/miniIMG/jiudian.png" alt="">
                        </div>
                        <div class="icon-title" >
                            酒店预定
                        </div>
                    </div>
                </div>
                <div class="myorder-container">
                    <div class="left-text">
                        <div class="left-myorder">
                            我的订单
                        </div>
                        <div class="left-desri">
                            <p>查看您的会展预定信息</p>
                            <p>以及酒店预定记录</p>
                        </div>
                    </div>
                    <div class="right-arrow" @click="goToMyOrder">
                        <img class="right-arrow-img" src="../static/miniIMG/right-arrow.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="yudin-container">
            <div>
                <el-icon :size="20">
                    <Service />
                </el-icon>
            </div>
            <div>
                <div>预订热线:</div>
                <p> 189 2380 1160 孔先生</p>
                <p>189 2380 1160 文小姐</p>
                <p>预定前请跟预订员确认订单信息</p>
                <p>邮箱：kong@sdlm.cn / wenmeiqi@sdlm.cn</p>

            </div>
            <div class="contact">
                <img src="../static/wechat.png" alt="">
                <div>查看二维码</div>
            </div>
        </div>

        <div class="exhibition-hotel">
            <div class="ex-title">
                展会介绍
            </div>
            <div>
                <p class="mb10" style="text-indent: 20px;line-height: 30px">
                    CIPPE始于2001年，常年有美国、加拿大、德国、俄罗斯、苏格兰、英国、法国、意大利、韩国等国际展团参展。国际展商包括埃克森美孚、俄油、俄气、俄罗斯管道运输、卡特彼勒、国民油井、斯伦贝谢、贝克休斯GE、卡麦龙、霍尼韦尔、飞利浦、施耐德、陶氏化学、罗克韦尔、康明斯、AkzoNobel、API、3M、E+H、MTU、ARIEL、KSB、泰科、Atlas Copco、山特维克、雅柯斯、海虹老人等。cippe国内企业重装组团亮相国内知名参展企业有中石油装备展团、中石化、中海油、中国船舶、中船重工、中国航天、中航工业吉航、中集来福士、宏华、杰瑞、科瑞、南阳二机、三一集团、北方重工、中信泰富、惠博普、杰利阳、恒泰艾普、安东石油、上海神开、铁虎石油、西部石油、泰富重装、海油集团、西安科迅、东方先科、金碧集团陕汽金玺、冠能固控、华油飞达、中油科昊、如石机械、道森集团、天津立林、海洋王、华荣防爆等。cippe买家云集活动精彩纷呈cippe2019有中石油、中石化、中海油总部参观团，中石油勘探开发海外项目部、中石油管道局、中外运长航集团、中远船务、沙特阿拉伯国家石油公司、壳牌石油、道达尔、俄气、俄油、康菲、挪威石油、巴西石油、苏丹国家石油、乌克兰石油等上百个国内外专业采购团现场参观洽谈。展会同期举办了“国际石油天然气产业高峰论坛”,获得了行业组织、***相关机构的赞誉。cippe媒体聚焦全球同步报道展会有新华社、人民日报、中央电视台、中国日报、中石油报、中石化报、Upstream、Worldoils、 Oil and Gas Australia、TB Petroleum中国证券报、上海证券报、财经日报、华尔街日报及新华网、新浪、搜狐、人民网等国内外上千家媒体报道。
                </p>
                <img class="mb10 flex-center" style="width: 100%;" src="../static/zhjs1.jpg" alt="">
                <p class="mb10" style="text-indent: 20px;line-height: 30px">
                    CIPPE始于2001年，常年有美国、加拿大、德国、俄罗斯、苏格兰、英国、法国、意大利、韩国等国际展团参展。国际展商包括埃克森美孚、俄油、俄气、俄罗斯管道运输、卡特彼勒、国民油井、斯伦贝谢、贝克休斯GE、卡麦龙、霍尼韦尔、飞利浦、施耐德、陶氏化学、罗克韦尔、康明斯、AkzoNobel、API、3M、E+H、MTU、ARIEL、KSB、泰科、Atlas Copco、山特维克、雅柯斯、海虹老人等。cippe国内企业重装组团亮相国内知名参展企业有中石油装备展团、中石化、中海油、中国船舶、中船重工、中国航天、中航工业吉航、中集来福士、宏华、杰瑞、科瑞、南阳二机、三一集团、北方重工、中信泰富、惠博普、杰利阳、恒泰艾普、安东石油、上海神开、铁虎石油、西部石油、泰富重装、海油集团、西安科迅、东方先科、金碧集团陕汽金玺、冠能固控、华油飞达、中油科昊、如石机械、道森集团、天津立林、海洋王、华荣防爆等。cippe买家云集活动精彩纷呈cippe2019有中石油、中石化、中海油总部参观团，中石油勘探开发海外项目部、中石油管道局、中外运长航集团、中远船务、沙特阿拉伯国家石油公司、壳牌石油、道达尔、俄气、俄油、康菲、挪威石油、巴西石油、苏丹国家石油、乌克兰石油等上百个国内外专业采购团现场参观洽谈。展会同期举办了“国际石油天然气产业高峰论坛”,获得了行业组织、***相关机构的赞誉。cippe媒体聚焦全球同步报道展会有新华社、人民日报、中央电视台、中国日报、中石油报、中石化报、Upstream、Worldoils、 Oil and Gas Australia、TB Petroleum中国证券报、上海证券报、财经日报、华尔街日报及新华网、新浪、搜狐、人民网等国内外上千家媒体报道。
                </p>
                <img class="mb10 flex-center" style="width: 100%;" src="../static/zhjs2.jpg" alt="">

            </div>
        </div>
    </div>

    
    <div class="exhibition-container hidden-xs-only">
        <div class="swiper-container">
            <div class="block">
                <el-carousel height="400px" interval="5000">
                    <el-carousel-item v-for="(item, index) in swiperList" :key="index">
                        <img class="swiper-image"
                            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="">
                        <!-- {{ item.src }} -->
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <div class="ex-info-container">
            <div class="ex-title">
                2024 年广州会展业创新发展峰会
            </div>
            <div class="ex-info">
                <div class="left-info">
                    <div class="info-item">
                        <el-icon style="margin-right:10px">
                            <Clock />
                        </el-icon>
                        2024 / 01 / 13 10:00
                    </div>
                    <div class="info-item">
                        <el-icon style="margin-right:10px">
                            <Location />
                        </el-icon>
                        广东省琶洲市九星大地会展中心
                    </div>
                    <div class="info-item" style="font-weight:700">
                        展馆：深圳国际会展中心
                    </div>
                </div>
                <div class="right-info">
                    <div class="info-item">
                        预定前请跟预订员确认订单信息
                    </div>
                    <div class="info-item">
                        邮箱：kong@sdlm.cn / wenmeiqi@sdlm.cn
                    </div>
                    <div class="info-item">
                        预订热线: 189 2380 1160 孔先生
                    </div>
                    <div class="info-item">
                        <span style="width:68.23px;display:inline-block;"></span> 189 2380 1160 文小姐
                    </div>
                </div>
            </div>
        </div>
        <div class="map-contaienr">
            <div class="left-map">
                <!-- <div id="container" class="imgStyle">
                    <Map />
                </div> -->

                <!-- <img class="imgStyle" src="../static/map.jpg" alt=""> -->
            </div>
            <div class="right-info">
                <div class="top-icon">
                    <router-link to="/exhibitionIntro" style="color: #3d3d3d;">
                        <div class="icon-item">
                            <div class="btn-bg">
                                <img class="icon-img" src="../static/miniIMG/exhibition-icon.png" alt="">
                            </div>

                            <div class="icon-title">
                                展商介绍
                            </div>

                        </div>
                    </router-link>
                    <div class="icon-item cursor">
                        <div class="btn-bg">
                            <img class="icon-img" src="../static/miniIMG/order.png" alt="">
                        </div>
                        <div class="icon-title">
                            订房须知
                        </div>
                    </div>
                    <div class="icon-item cursor" @click="goToHotel">
                        <div class="btn-bg">
                            <img class="icon-img" src="../static/miniIMG/jiudian.png" alt="">
                        </div>
                        <div class="icon-title"   >
                            酒店预定
                        </div>
                    </div>
                </div>
                <div class="myorder-container">
                    <div class="left-text">
                        <div class="left-myorder">
                            我的订单
                        </div>
                        <div class="left-desri">
                            <p>查看您的会展预定信息</p>
                            <p>以及酒店预定记录</p>
                        </div>
                    </div>
                    <div class="right-arrow cursor" @click="goToMyOrder">
                        <img class="right-arrow-img" src="../static/miniIMG/right-arrow.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="exhibition-hotel">
            <div class="ex-title">
                展会介绍
            </div>
            <div>
                <p class="mb10" style="text-indent: 20px;line-height: 30px">
                    CIPPE始于2001年，常年有美国、加拿大、德国、俄罗斯、苏格兰、英国、法国、意大利、韩国等国际展团参展。国际展商包括埃克森美孚、俄油、俄气、俄罗斯管道运输、卡特彼勒、国民油井、斯伦贝谢、贝克休斯GE、卡麦龙、霍尼韦尔、飞利浦、施耐德、陶氏化学、罗克韦尔、康明斯、AkzoNobel、API、3M、E+H、MTU、ARIEL、KSB、泰科、Atlas Copco、山特维克、雅柯斯、海虹老人等。cippe国内企业重装组团亮相国内知名参展企业有中石油装备展团、中石化、中海油、中国船舶、中船重工、中国航天、中航工业吉航、中集来福士、宏华、杰瑞、科瑞、南阳二机、三一集团、北方重工、中信泰富、惠博普、杰利阳、恒泰艾普、安东石油、上海神开、铁虎石油、西部石油、泰富重装、海油集团、西安科迅、东方先科、金碧集团陕汽金玺、冠能固控、华油飞达、中油科昊、如石机械、道森集团、天津立林、海洋王、华荣防爆等。cippe买家云集活动精彩纷呈cippe2019有中石油、中石化、中海油总部参观团，中石油勘探开发海外项目部、中石油管道局、中外运长航集团、中远船务、沙特阿拉伯国家石油公司、壳牌石油、道达尔、俄气、俄油、康菲、挪威石油、巴西石油、苏丹国家石油、乌克兰石油等上百个国内外专业采购团现场参观洽谈。展会同期举办了“国际石油天然气产业高峰论坛”,获得了行业组织、***相关机构的赞誉。cippe媒体聚焦全球同步报道展会有新华社、人民日报、中央电视台、中国日报、中石油报、中石化报、Upstream、Worldoils、 Oil and Gas Australia、TB Petroleum中国证券报、上海证券报、财经日报、华尔街日报及新华网、新浪、搜狐、人民网等国内外上千家媒体报道。
                </p>
                <img class="mb10 flex-center" style="width: 100%;" src="../static/zhjs1.jpg" alt="">
                <p class="mb10" style="text-indent: 20px;line-height: 30px">
                    CIPPE始于2001年，常年有美国、加拿大、德国、俄罗斯、苏格兰、英国、法国、意大利、韩国等国际展团参展。国际展商包括埃克森美孚、俄油、俄气、俄罗斯管道运输、卡特彼勒、国民油井、斯伦贝谢、贝克休斯GE、卡麦龙、霍尼韦尔、飞利浦、施耐德、陶氏化学、罗克韦尔、康明斯、AkzoNobel、API、3M、E+H、MTU、ARIEL、KSB、泰科、Atlas Copco、山特维克、雅柯斯、海虹老人等。cippe国内企业重装组团亮相国内知名参展企业有中石油装备展团、中石化、中海油、中国船舶、中船重工、中国航天、中航工业吉航、中集来福士、宏华、杰瑞、科瑞、南阳二机、三一集团、北方重工、中信泰富、惠博普、杰利阳、恒泰艾普、安东石油、上海神开、铁虎石油、西部石油、泰富重装、海油集团、西安科迅、东方先科、金碧集团陕汽金玺、冠能固控、华油飞达、中油科昊、如石机械、道森集团、天津立林、海洋王、华荣防爆等。cippe买家云集活动精彩纷呈cippe2019有中石油、中石化、中海油总部参观团，中石油勘探开发海外项目部、中石油管道局、中外运长航集团、中远船务、沙特阿拉伯国家石油公司、壳牌石油、道达尔、俄气、俄油、康菲、挪威石油、巴西石油、苏丹国家石油、乌克兰石油等上百个国内外专业采购团现场参观洽谈。展会同期举办了“国际石油天然气产业高峰论坛”,获得了行业组织、***相关机构的赞誉。cippe媒体聚焦全球同步报道展会有新华社、人民日报、中央电视台、中国日报、中石油报、中石化报、Upstream、Worldoils、 Oil and Gas Australia、TB Petroleum中国证券报、上海证券报、财经日报、华尔街日报及新华网、新浪、搜狐、人民网等国内外上千家媒体报道。
                </p>
                <img class="mb10 flex-center" style="width: 100%;" src="../static/zhjs2.jpg" alt="">

            </div>
        </div>
    </div>
    <Footer />
</template>

<script lang="ts" setup>
    import Header from '@/components/Header.vue'
    import { ref } from 'vue'
    import phoneHotel from '@/components/phoneHotel.vue'
    import Footer from '@/components/Footer.vue'
    import router from '@/router'
    import Map from '@/components/Map.vue'

    const goToMyOrder = () => {
        console.log('goToMyOrder')
        router.push({
            name: 'myOrder',
        })
    }
    const hotelStar = ref(4)
    const phoneRate = ref(4)

    const goToHotel = () => {
        console.log('goToHotel')
        router.push({
            name: 'exhibitionHotel',
        })
    }

    const gotoHotelDetail = () => {
        console.log('gotoHotelDetail')
        router.push({
            name: 'hotelDetail',
        })
    }
    // 轮播图list
    const swiperList = [
        {
            id: 1,
            src: '../static/s1.jpg'
        },
        {
            id: 2,
            src: '../static/s2.jpg'
        },
        {
            id: 3,
            src: '../static/s3.jpg'
        },
        {
            id: 4,
            src: '../static/image.png'
        }
    ]
</script>

<style lang="scss" scoped>
    @import '@/assets/variables.scss';

    .exhibition-container2 {
        .mini-hotel-item {
            position: relative;
            display: flex;
            align-items: center;
            flex-direction: column;
            border-radius: 0 0 10px 10px !important;
            box-shadow: 0px 4px 10px 0px #EDF3FD;
            border-radius: 5px;
            margin-bottom: 20px;

            .img-container {
                width: 100%;
                border-radius: 10px 10px 0 0;

                .imgStyle {
                    width: 100%;
                    border-radius: 10px 10px 0 0;

                    object-fit: cover;
                }
            }

            .hotel-info {
                width: 100%;
                padding: 10px 20px;

                .hotel-name {
                    font-size: 24px;
                    font-weight: 500;
                    margin-bottom: 6px;

                    .el-rate {
                        margin-left: 10px;
                        font-size: 24px;
                    }
                }

                .hotel-address {
                    margin-bottom: 6px;

                    color: #817F7F;
                }

                .priceAndRate {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .door-price {

                        .real-door-price {
                            font-size: 12px;
                            margin-right: 5px;
                            color: #817F7F;
                            text-decoration: line-through;
                        }


                        span {
                            color: #356CEB;
                            font-size: 16px;

                        }

                        .real-price {
                            color: #356CEB;
                            font-weight: 600;
                            font-size: 24px;
                        }
                    }
                }
            }

            .juli-tag {
                position: absolute;
                top: 20px;
                right: 20px;
                color: #356CEB;
                border-radius: 10px;
                font-weight: 600;
            }
        }

        .yudin-container {
            display: flex;
            padding: 20px;
            justify-content: space-around;
            color: #3D3D3D;
            font-size: 12px;

            .contact {
                display: flex;
                flex-direction: column;
                align-items: center;

                img {
                    width: 30px;
                    height: 30px;
                }
            }


        }

        .exhibition-hotel {
            padding: 20px;

            margin: 0 auto;

            .ex-title {
                font-size: 22px;
                font-weight: 600;
                margin-bottom: 20px;
            }

            .hotel-item {
                background-color: #FAFAFA;
                padding: 20px;
                padding: 20px;
                border-radius: 5px;
                margin-bottom: 20px;

                .hotel-room {
                    background-color: #fff;
                    padding: 20px;
                    margin-top: 20px;
                    border-radius: 5px;
                    margin-bottom: 20px;

                    .room-intro {
                        display: flex;
                        padding-bottom: 30px;
                        border-bottom: 1px solid #D8D8D8;

                        .room-img {
                            width: 30%;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }

                        .room-guige {
                            width: 40%;
                            margin-left: 20px;

                            p {
                                margin-bottom: 10px;
                            }
                        }

                        .room-name {
                            width: 28%;
                            margin-left: 20px;
                            margin-top: 30px;

                            .name {
                                font-size: 24px;
                                font-weight: 600;
                                margin-bottom: 10px;
                            }

                            .room-descri {
                                margin-bottom: 10px;
                            }

                            .room-num {
                                color: #356CEB;
                            }
                        }
                    }

                    .choose-room {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 0 20px;
                        padding-bottom: 30px;
                        border-bottom: 1px solid #D8D8D8;
                        margin-top: 20px;

                        .room-zaocan {
                            color: #356CEB;
                        }

                        .room-price {
                            display: flex;
                            align-items: center;

                            .price-contaienr {
                                margin-right: 80px;
                                display: flex;
                                flex-direction: column;
                                align-items: center;

                                .origin-price {

                                    text-decoration: line-through;
                                    color: #999;
                                }

                                .price {
                                    color: #356CEB;

                                    .real-price {

                                        font-size: 36px;
                                        margin: 0px 5px;
                                    }
                                }
                            }

                            .yudin-btn {
                                .el-button {
                                    width: 100px;
                                }
                            }
                        }
                    }
                }

                .hotel-name {
                    display: flex;
                    font-size: 28px;
                    margin-bottom: 20px;
                    font-weight: 500;
                    margin-right: 10px;

                    .el-rate {
                        margin-left: 10px;
                        font-size: 28px;
                    }
                }

                .hotel-address {
                    display: flex;

                    margin-bottom: 20px;

                    .showMap {
                        margin-left: 20px;
                        color: #356CEB;
                        cursor: pointer;
                    }
                }

                .peizhi {
                    margin-bottom: 20px;
                    color: #356CEB;
                }

                .hotel-content {
                    display: flex;
                    justify-content: space-between;

                    .hotel-imgs {
                        width: 55%;

                        .swiper-image {
                            width: 100%;
                            height: 300px;
                            object-fit: cover;
                        }
                    }

                    .info-container {
                        width: 40%;

                        .price-container {
                            display: flex;
                            justify-content: space-around;
                            align-items: center;

                            .origin-price {

                                text-decoration: line-through;
                                color: #999;
                            }

                            .price {
                                display: flex;
                                align-items: center;
                                color: #356CEB;

                                .real-price {
                                    margin-bottom: 12px;
                                    font-size: 36px;
                                    margin: 0px 5px;
                                }
                            }

                            .tag {
                                display: flex;
                                text-align: right;
                            }
                        }

                        .hotel-info {
                            margin-bottom: 20px;
                        }

                        .map-contaienr2 {
                            display: flex;
                            width: 100%;

                            .hotel-map {
                                width: 100px;
                                height: 100px;

                                .mini-map {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }
                            }
                        }

                        .service {
                            display: flex;
                            justify-content: space-between;
                            color: #356CEB;
                            margin-top: 20px;
                        }

                        .map-into {
                            display: flex;
                            flex-direction: column;
                            width: 90%;

                            .map-juli {
                                width: 100%;
                                justify-content: space-around;
                                display: flex;
                            }

                            .watchMap {
                                color: #356CEB;
                                display: flex;
                                cursor: pointer;
                                margin-left: 12px;
                                margin-top: 30px;
                            }
                        }
                    }
                }
            }
        }

        .map-contaienr {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            margin: 0 auto;

            .left-map {
                width: 100%;

                .imgStyle {
                    width: 100%;
                    object-fit: cover;
                }
            }

            .right-info {
                width: 100%;

                .top-icon {
                    display: flex;
                    justify-content: space-around;
                    margin-top: 20px;
                    margin-bottom: 20px;

                    .icon-item {
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        .btn-bg {
                            width: 60px;
                            height: 60px;
                            background-color: #356CEB;
                            border-radius: 50%;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            margin-bottom: 10px;

                            .icon-img {
                                width: 30px;
                                height: 30px;
                            }
                        }

                        .icon-title {
                            font-size: 14px;
                        }
                    }
                }

                .myorder-container {
                    display: flex;
                    background-color: #EDF3FD;
                    align-items: center;
                    justify-content: space-between;
                    border-radius: 5px;
                    padding: 20px;

                    .left-text {
                        color: #356CEB;

                        .left-myorder {
                            font-size: 18px;
                            font-weight: 600;
                            margin-bottom: 10px;
                        }

                        .left-desri {
                            font-size: 14px;
                            color: #356CEB;
                        }
                    }

                    .right-arrow {
                        width: 40px;
                        height: 40px;

                        .right-arrow-img {
                            width: 100%;
                            height: 100%;

                        }
                    }
                }
            }
        }

        .swiper-container {
            background-color: #fff;

            margin: 0 auto;

            .swiper-image {
                width: 100%;
                height: 400px;
                object-fit: cover;
            }
        }

        .ex-info-container {
            padding: 20px;

            margin: 0 auto;

            .ex-title {
                font-size: 22px;
                font-weight: 600;
                margin-bottom: 20px;
            }

            .ex-info {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .left-info {
                    .info-item {
                        display: flex;
                        align-items: center;
                        margin-bottom: 10px;

                        el-icon {
                            margin-right: 10px;
                        }
                    }
                }

                .daohang {
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    justify-content: center;
                    margin-bottom: 20px;
                    color: #356CEB;

                    img {
                        width: 50px;
                        height: 50px;

                    }
                }
            }
        }
    }

    .exhibition-container {

        .exhibition-hotel {
            padding: 20px;
            max-width: $primary-max-width;

            margin: 0 auto;

            .ex-title {
                font-size: 38px;
                font-weight: 600;
                margin-bottom: 20px;
            }

            .hotel-item {
                background-color: #FAFAFA;
                padding: 20px;
                padding: 20px;
                border-radius: 5px;
                margin-bottom: 20px;

                .hotel-room {
                    background-color: #fff;
                    padding: 20px;
                    margin-top: 20px;
                    border-radius: 5px;
                    margin-bottom: 20px;

                    .room-intro {
                        display: flex;
                        padding-bottom: 30px;
                        border-bottom: 1px solid #D8D8D8;

                        .room-img {
                            width: 30%;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }

                        .room-guige {
                            width: 40%;
                            margin-left: 20px;

                            p {
                                margin-bottom: 10px;
                            }
                        }

                        .room-name {
                            width: 28%;
                            margin-left: 20px;
                            margin-top: 30px;

                            .name {
                                font-size: 24px;
                                font-weight: 600;
                                margin-bottom: 10px;
                            }

                            .room-descri {
                                margin-bottom: 10px;
                            }

                            .room-num {
                                color: #356CEB;
                            }
                        }
                    }

                    .choose-room {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 0 20px;
                        padding-bottom: 30px;
                        border-bottom: 1px solid #D8D8D8;
                        margin-top: 20px;

                        .room-zaocan {
                            color: #356CEB;
                        }

                        .room-price {
                            display: flex;
                            align-items: center;

                            .price-contaienr {
                                margin-right: 80px;
                                display: flex;
                                flex-direction: column;
                                align-items: center;

                                .origin-price {
                                    // 删除线
                                    text-decoration: line-through;
                                    color: #999;
                                }

                                .price {
                                    color: #356CEB;

                                    .real-price {

                                        font-size: 36px;
                                        margin: 0px 5px;
                                    }
                                }
                            }

                            .yudin-btn {
                                .el-button {
                                    width: 100px;
                                }
                            }
                        }
                    }
                }

                .hotel-name {
                    display: flex;
                    font-size: 28px;
                    margin-bottom: 20px;
                    font-weight: 500;
                    margin-right: 10px;

                    .el-rate {
                        margin-left: 10px;
                        font-size: 28px;
                    }
                }

                .hotel-address {
                    display: flex;

                    margin-bottom: 20px;

                    .showMap {
                        margin-left: 20px;
                        color: #356CEB;
                        cursor: pointer;
                    }
                }

                .peizhi {
                    margin-bottom: 20px;
                    color: #356CEB;
                }

                .hotel-content {
                    display: flex;
                    justify-content: space-between;

                    .hotel-imgs {
                        width: 55%;

                        .swiper-image {
                            width: 100%;
                            height: 300px;
                            object-fit: cover;
                        }
                    }

                    .info-container {
                        width: 40%;

                        .price-container {
                            display: flex;
                            justify-content: space-around;
                            align-items: center;

                            .origin-price {
                                // 删除线
                                text-decoration: line-through;
                                color: #999;
                            }

                            .price {
                                display: flex;
                                align-items: center;
                                color: #356CEB;

                                .real-price {
                                    margin-bottom: 12px;
                                    font-size: 36px;
                                    margin: 0px 5px;
                                }
                            }

                            .tag {
                                display: flex;
                                text-align: right;
                            }
                        }

                        .hotel-info {
                            margin-bottom: 20px;
                        }

                        .map-contaienr2 {
                            display: flex;
                            width: 100%;

                            .hotel-map {
                                width: 100px;
                                height: 100px;

                                .mini-map {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }
                            }
                        }

                        .service {
                            display: flex;
                            justify-content: space-between;
                            color: #356CEB;
                            margin-top: 20px;
                        }

                        .map-into {
                            display: flex;
                            flex-direction: column;
                            width: 90%;

                            .map-juli {
                                width: 100%;
                                justify-content: space-around;
                                display: flex;
                            }

                            .watchMap {
                                color: #356CEB;
                                display: flex;
                                cursor: pointer;
                                margin-left: 12px;
                                margin-top: 30px;
                            }
                        }
                    }
                }
            }
        }

        .map-contaienr {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            width: $primary-max-width;
            margin: 0 auto;

            .left-map {
                width: 60%;

                .imgStyle {
                    width: 100%;
                    height: 400px;
                    object-fit: cover;
                }
            }

            .right-info {
                width: 35%;

                .top-icon {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 50px;

                    .icon-item {
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        .btn-bg {
                            width: 60px;
                            height: 60px;
                            background-color: #356CEB;
                            border-radius: 50%;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            margin-bottom: 10px;

                            .icon-img {
                                width: 30px;
                                height: 30px;
                            }
                        }

                        .icon-title {
                            font-size: 14px;
                        }
                    }
                }

                .myorder-container {
                    display: flex;
                    background-color: #EDF3FD;
                    align-items: center;
                    justify-content: space-between;
                    border-radius: 5px;
                    padding: 20px;

                    .left-text {
                        color: #356CEB;

                        .left-myorder {
                            font-size: 18px;
                            font-weight: 600;
                            margin-bottom: 10px;
                        }

                        .left-desri {
                            font-size: 14px;
                            color: #356CEB;
                        }
                    }

                    .right-arrow {
                        width: 40px;
                        height: 40px;

                        .right-arrow-img {
                            width: 100%;
                            height: 100%;

                        }
                    }
                }
            }
        }

        .swiper-container {
            background-color: #fff;

            margin: 0 auto;

            .swiper-image {
                width: 100%;
                height: 400px;
                object-fit: cover;
            }
        }

        .ex-info-container {
            padding: 20px;
            width: $primary-max-width;
            margin: 0 auto;

            .ex-title {
                font-size: 38px;
                font-weight: 600;
                margin-bottom: 20px;
            }

            .ex-info {
                display: flex;

                .left-info {
                    margin-right: 150px;

                    .info-item {
                        display: flex;
                        align-items: center;
                        margin-bottom: 10px;

                        el-icon {
                            margin-right: 10px;
                        }
                    }
                }

                .right-info {
                    .info-item {
                        margin-bottom: 10px;
                    }
                }
            }
        }
    }
</style>